<template>
  <div class="table" ref="table">
    <el-table
      :data="data"
      @selection-change="handleSelectionChange"
      @row-click="rowClick"
      ref="zTreeTable"
      row-key="id"
      class="tree-table"
      v-horizontal-scroll="{bottom:42}"
    >
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        v-for="(column, index) in columns"
        :prop="column.prop"
        :label="column.label"
        :align="column.align"
        :width="column.width"
        :show-overflow-tooltip="column.showOverflowTooltip"
        :fixed="column.fixed"
        :key="column.prop">
        <template v-slot="scope">

          <template v-if="!column.render">
            <template v-if="column.formatter">
              <span v-html="column.formatter(scope.row, column)"/>
            </template>
            <template v-else>
              <span>{{ scope.row[column.prop] }}</span>
            </template>
          </template>
          <template v-else>
            <expand-dom :column="column" :row="scope.row" :render="column.render" :index="index"/>
          </template>
        </template>
      </el-table-column>

      <el-table-column :label="operates.title===undefined?'操作':operates.title" align="center"
                       :width="(operates.width===undefined||operates.width==='auto')?operates.list.length*100:operates.width"
                       :fixed="(device==='desktop')&&(operates.fixed===undefined?'right':operates.fixed)"
                       v-if="(operates.list.length > 0)"
      >
        <template v-slot="scope">
          <div>
            <template v-for="(btn, key) in operates.list">
              <el-button :type="btn.type" size="mini" :icon="btn.icon"
                         :key="key"
                         v-permission="btn.permission"
                         :disabled="btn.disabled(scope.$index,scope.row)"
                         :plain="btn.plain" @click.native.prevent="btn.method(key,scope.row)">{{
                  btn.label
                }}
              </el-button>
            </template>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script lang="ts">
import {Component, Emit, Prop, Vue} from 'vue-property-decorator';
import {Getter} from 'vuex-class';
import erd from "element-resize-detector";

@Component({
  components: {
    expandDom: {
      functional: true,
      props: {
        row: Object,
        render: Function,
        index: Number,
        column: {
          type: Object,
          default: null
        }
      },
      render: (createElement, context) => {
        //详细使用方法见 https://cn.vuejs.org/v2/guide/render-function.html#createElement-%E5%8F%82%E6%95%B0
        const params = {
          row: context.props.row,
          index: context.props.index,
          column: ''
        };
        if (context.props.column) {
          params.column = context.props.column;
        }
        return context.props.render(createElement, params);
      }
    }
  }
})
export default class TreeTable extends Vue {

  @Prop()  // 这是相应的字段展示
  private columns!: Array<any>;
  @Prop()//这是数据源
  private data!: Array<any>;

  @Prop()//// width:按钮列宽，fixed：是否固定（left,right）,按钮集合 === label: 文本，type :类型（primary / success / warning / danger / info / text），show：是否显示，icon：按钮图标，plain：是否朴素按钮，disabled：是否禁用，method：回调方法
  private operates!: any;
  @Getter('device') private device!: string;
  private multipleSelection: Array<any> = [];// 多行选中
  // 多行选中
  @Emit('handleSelectionChange')
  @Emit('handle-selection-change')
  handleSelectionChange(val) {
    this.multipleSelection = val;
    return val;
  }

  @Emit('rowClick')
  @Emit('row-click')
  rowClick(val: any) {
    return val;
  }

  mounted() {
    this.onresize();
  }

  $refs!: {
    zTreeTable: HTMLFormElement,
    table: HTMLDivElement
  };

  onresize() {
    const container = this.$refs.zTreeTable.$el;
    erd().listenTo(container, () => {
      this.$nextTick(() => {
        if (this.$refs.table) {
          this.$refs.table.style.height = (this.$refs.zTreeTable && this.$refs.zTreeTable.$el.clientHeight) + 'px';
        }
      })
    })
  }
}
</script>
<style lang="scss" scoped>
.table {
  position: relative;

  .tree-table {
    position: absolute;
    width: 100%;
  }
}
</style>
